<template>
  <view class="conter">
    <cc-goback title='组织排名' color="#fff"></cc-goback>
    <view class="navigation_head"></view>
    <view class="datatime">
      *数据时间：{{date}}
    </view>
    <view class="head">
      <view class="head_a">
        <view class="head_box">
          <view class="head_img1">
            <image src="../../static/organization_ranking/xiala.png" mode=""></image>
          </view>
          <view class="head_word" @click="popup">
            <view v-if="falg_a==0">
              小时排名
            </view>
            <view v-if="falg_a==1">
              日排名
            </view>
            <view v-if="falg_a==2">
              月排名
            </view>
            <view v-if="falg_a==4">
              自定义
            </view>
          </view>
        </view>
      </view>
      <view class="head_b">
        <view class="head_bb" :class="{head_ba:falg==0}" @click="cheangs">
          厂界
        </view>
        <view class="head_bb" :class="{head_ba:falg==1}" @click="cheangs_a">
          排口
        </view>
      </view>
    </view>
    <view class="detail">
      <view class="detail_word">
        徽州区组织排名详图
      </view>
      <view class="box">
        <echarts ref="echat" :option="option" style="height: 1500px;" @click="echartsClick"></echarts>
      </view>
    </view>
    <!-- 弹出框 -->
    <uni-popup ref="popup" type="bottom">
      <view class="popup">
        <view class="popup_head">
          排名方式
        </view>
        <view class="switch">
          <view class="switch_right" :class="{switch_left:falg_a==0}" @click="cheang">
            小时排名
          </view>
          <view class="switch_right" :class="{switch_left:falg_a==1}" @click="cheang_a">
            日排名
          </view>
          <view class="switch_right" :class="{switch_left:falg_a==2}" @click="cheang_b">
            月排名
          </view>
          <view class="switch_right" :class="{switch_left:falg_a==4}" @click="cheang_c">
            自定义
          </view>
        </view>
        <view class="time">
          选择日期
        </view>
        <view class="time_icon">
          <image src="../../static/data_analysis/rili.png" mode=""></image>
          <view class="time_number" v-if="falg_a==0">
            {{date_h}}
          </view>
          <view class="time_number" v-if="falg_a==1">
            {{date_d}}
          </view>
          <view class="time_number" v-if="falg_a==2">
            {{date_m}}
          </view>
          <view class="custom" v-if="falg_a==4">
            <view class="date_right">
              <uni-datetime-picker type="date" :value="dates" start="2020-6-15" end="2025-6-15" @change="dateChange">
              </uni-datetime-picker>
            </view>
            <view class="date_word">
              -
            </view>
            <view class="date_right">
              <uni-datetime-picker type="date" :value="dates" start="2020-6-15" end="2025-6-15" @change="dateChange_a">
              </uni-datetime-picker>
            </view>
          </view>
        </view>
        <view class="popup_btn">
          <view class="btn_left">
            <button type="primary" plain="true" @click="cancel">取消</button>
          </view>
          <view class="btn_right">
            <button type="primary" @click="confirm">确认</button>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import echarts from '@/components/echarts/echarts.vue';
  import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
  import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
  import dateFtt from '@/util/dateFtt.js'
  export default {
    components: {
      msDropdownMenu,
      msDropdownItem,
      dateFtt
    },
    data() {
      return {
        // 排名列表
        rankingList: '',
        date_h: '',
        date_d: '',
        date_m: '',
        date: '',
        dates: '',
        startTime: '',
        endTime: '',
        option: {
          color: ['#209CFF'],
          dataset: {
            source: [
              // ['score', 'amount', 'product'],
              // [68.1, 10, '花花'],
              // [68.1, 15, '黄皮子'],
              // [68.1, 18, '爱丽丝'],
              // [68.1, 20, '酆韵'],
              // [68.1, 23, '和凡'],
              // [68.1, 28, '蓝康德'],
              // [68.1, 30, '西黛'],
              // [32.7, 35, '昌力'],
              // [32.7, 40, '康佳化工'],
              // [32.7, 50, '永利']
            ]
          },
          grid: {
            containLabel: true
          },
          xAxis: {
            nameTextStyle :{
                      padding: [0,0,5,-10],
            					fontSize: 2
            				},
            name:'mg/m³',
            position: 'top',
          },
          yAxis: {
            type: 'category',
            inverse: true,
          },
          // visualMap: {
          //     orient: 'horizontal',
          //     left: 'center',
          //     min: 10,
          //     max: 100,
          //     text: ['High Score', 'Low Score'],
          //     // Map the score column to color
          //     dimension: 0,
          //     inRange: {
          //         color: ['#68E0CF','#209CFF','#EC8C69','#ED6E8C' ]
          //     }
          // },
          series: [{
            type: 'bar',
            encode: {
              // Map the "amount" column to X axis.
              x: 'amount',
              // Map the "product" column to Y axis
              y: 'product'
            },
            itemStyle: { //上方显示数值
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'right', //在上方显示
                  textStyle: { //数值样式
                    color: '#333333',
                    fontSize: 5
                  }
                }
              }
            }
          }]
        },
        falg_a: 0,
        falg: 0,
      }
    },
    onLoad() {
      // 格式化时间
      // 时
      this.date_h = this.dateFtt('yyyy-MM-dd hh', new Date())
      // 日
      this.date_d = this.dateFtt('yyyy-MM-dd', new Date())
      // 月
      this.date_m = this.dateFtt('yyyy-MM', new Date())
      this.date = this.date_h
      // console.log('date', this.date_h,this.date_d,this.date_m)
      if (this.date) {
        this.getranking()
      }
    },
    methods: {
      // 企业排名
      getranking() {
        this.$http.get('/envirnment-air/analysis/enterpriseRank', {
          date: this.date,
          dateType: this.falg_a,
          type: this.falg,
        }).then(res => {
          if (res.code == '00000') {
            console.log('排名', res)
            const List = []
            res.data.forEach((item, index) => {
              List.push(
                [item.value, item.value, item.enterpriseName]
              )
            })
            List.unshift(
              ['score', 'amount', 'product']
            )
            this.option.dataset.source = List
            // console.log('123',this.option.dataset.source)
            this.$refs.echat.update(this.option)
          }
        })
      },
      cheang() {
        this.falg_a = 0
        this.date = this.date_h
      },
      cheang_a() {
        this.falg_a = 1
        this.date = this.date_d
      },
      cheang_b() {
        this.falg_a = 2
        this.date = this.date_m
      },
      cheang_c() {
        this.falg_a = 4
      },
      dateChange(e) {
        this.startTime = e
        // console.log('0000',this.startTime)
      },
      dateChange_a(e) {
        this.endTime = e
        // console.log('0000',this.endTime)
      },
      popup() {
        // 通过组件定义的ref调用uni-popup方法
        this.$refs.popup.open()
      },
      cancel() {
        // 通过组件定义的ref调用uni-popup方法
        this.$refs.popup.close()
      },
      confirm() {
        if (this.falg_a == 4) {
          this.date = this.startTime + ',' + this.endTime
        }
        // 通过组件定义的ref调用uni-popup方法
        this.$refs.popup.close()
        this.getranking()
      },
      // 获取时间并赋值
      // mileage(e) {
      //   this.mileage_num = e.value
      //   // console.log(this.mileage_num);
      //   if(this.mileage_num==0){
      //     this.getranking(this.date_h)
      //   }
      //   if(this.mileage_num==1){
      //     this.getranking(this.date_d)
      //   }
      //   if(this.mileage_num==2){
      //     this.getranking(this.date_m)
      //   }
      // },
      /**
       * 点击事件
       * @param {Object} params
       */
      echartsClick(params) {
        console.log('点击数据', params)
      },
      cheangs() {
        this.falg = 0
        this.getranking()
      },
      cheangs_a() {
        this.falg = 1
        this.getranking()
      },
    }
  }
</script>

<style lang="scss">
 .uni-datetime-picker-timebox[data-v-6e13d7e2] {
   border: none !important;
 }

  .navigation_head {
    height: calc(88rpx + var(--status-bar-height));
  }

  .qiun-charts-rotate {
    width: 700upx;
    height: 1100upx;
    background-color: #FFFFFF;
    padding: 25upx;
  }

  .charts-rotate {
    width: 700upx;
    height: 1100upx;
    
    background-color: #FFFFFF;
  }

  .conter {
    background-color: #F7F7F7;
    // height: 1452rpx;
    overflow: hidden;
  }

  .head {
    display: flex;
    justify-content: space-between;
    margin: 10rpx 0 25rpx;
  }

  .head_a {
    overflow: hidden;
    display: flex;
    align-items: center;
    width: 290rpx;
    height: 66rpx;
    background: #FFFFFF;
    border-radius: 8rpx;
    margin: 20rpx 0 0 24rpx;
  }

  .head_box {
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .head_word {
    width: 230rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    margin-left: 10rpx;
  }

  .head_ba {
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    background: #4EA1FF;
    border-radius: 8rpx;
  }

  .head_bb {
    width: 191rpx;
    height: 66rpx;
    line-height: 66rpx;
    font-size: 24rpx;
    text-align: center;
    // background: #fff;
  }

  .head_b {
    display: flex;
    align-items: center;
    width: 382rpx;
    height: 66rpx;
    background-color: #fff;
    margin: 20rpx 24rpx 0 0;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    text-align: center;
  }

  .head_img1 {
    // width: 24rpx;
    // height: 24rpx;
    margin-left: 20rpx;

    image {
      width: 24rpx;
      height: 24rpx;
    }
  }

  .head_img2 {
    width: 22rpx;
    height: 12rpx;
    margin: 0 0 40rpx 108rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .head_img3 {
    width: 28rpx;
    height: 28rpx;
    margin: 0 10rpx 0 19rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .head_img4 {
    width: 22rpx;
    height: 12rpx;
    margin: 0 0 40rpx 50rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .detail {
    width: 704rpx;
    margin: 0 auto;
    background-color: #fff;
    overflow: hidden;
    border-radius: 8rpx;
  }

  .box {
    transform: translate(-8%, -3%);
  }

  .detail_word {
    margin: 30rpx 0 0 30rpx;
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .popup {
    height: 929rpx;
    background-color: #fff;
    border-radius: 20rpx 20rpx 0px 0px;
    overflow: hidden;
  }

  .popup_head {
    margin-top: 30rpx;
    text-align: center;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .switch {
    display: flex;
    width: 702rpx;
    margin: 64rpx auto 0;
    border-radius: 8rpx;
    border: 1rpx solid #EAEAEA;
  }

  .switch_left {
    width: 175rpx;
    height: 66rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 66rpx;
    text-align: center;
    background: #4EA1FF !important;
    border-radius: 8rpx;
  }

  .switch_right {
    width: 175rpx;
    height: 66rpx;
    font-size: 24rpx;
    font-weight: 500;
    line-height: 66rpx;
    text-align: center;
    background: #fff;
    border-right: 1rpx solid #EAEAEA;
  }

  .switch_right:last-child {
    border: none;
  }

  .time {
    margin: 60rpx 0 0 24rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
  }

  .time_icon {
    display: flex;
    margin: 20rpx auto 0;
    width: 702rpx;
    height: 66rpx;
    line-height: 66rpx;
    text-align: center;
    background: #FFFFFF;
    border-radius: 8rpx;
    border: 1rpx solid #EEEEEE;

    image {
      margin: 20rpx 0 0 30rpx;
      width: 24rpx;
      height: 24rpx;
    }
  }

  .time_number {
    margin-left: 21rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
  }

  .time_word {
    margin: 0 39rpx 0 60rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
  }

  .popup_btn {
    position: absolute;
    left: 24rpx;
    bottom: 30rpx;
    display: flex;
  }

  .btn_left {
    width: 242rpx;
    height: 80rpx;
    margin: 0 20rpx 20rpx 0;
  }

  .btn_right {
    width: 440rpx;
    height: 80rpx;
  }

  .custom {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 600rpx;
    height: 66rpx;
    overflow: hidden;
    margin-left: 20rpx;
  }

  .date_right {
    font-size: 24rpx;
    width: 240rpx;

  }
  .datatime{
    position: fixed;
    bottom: 0;
    width: 750rpx;
    height: 64rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #E0EBF7;
    font-size: 26rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #506985;
    z-index: 1;
  }
</style>
